Denna fråges svar är ett samhällsarbete. Redigera befintliga svar för att förbättra det här inlägget. Det accepterar för närvarande inte nya svar eller interaktioner. Hur kan jag omdirigera användaren från en sida till en annan med jQuery eller ren JavaScript?
1
2
Nästa
Man omdirigerar inte bara med jQuery
jQuery är inte nödvändigt och window.location.replace (...) simulerar bäst en HTTP-omdirigering.
window.location.replace (...) är bättre än att använda window.location.href, eftersom ersätt () inte behåller den ursprungliga sidan i sessionshistoriken, vilket innebär att användaren inte fastnar i en oändlig bak knappen fiasko.
Om du vill simulera någon som klickar på en länk, använd
location.href
Om du vill simulera en HTTP-omdirigering, använd location.replace
Till exempel:
// liknande beteende som en HTTP-omdirigering
window.location.replace ("http://stackoverflow.com");
// liknande beteende som att klicka på en länk
window.location.href = "http://stackoverflow.com";
|
VARNING: Detta svar har bara tillhandahållits som en möjlig lösning; det är uppenbarligen inte den bästa lösningen, eftersom det kräver jQuery. Föredrar istället den rena JavaScript-lösningen.
$ (plats) .attr ('href', 'http://stackoverflow.com')
|
Standard "vanilj" JavaScript-sätt att omdirigera en sida
window.location.href = 'newPage.html';
Eller enklare: (eftersom fönstret är globalt)
location.href = 'newPage.html';
Om du är här för att du tappar HTTP_REFERER när du omdirigerar, fortsätt läsa:
(I annat fall ignorera den sista delen)
Följande avsnitt är för dem som använder HTTP_REFERER som en av många säkerhetsåtgärder (även om det inte är en bra skyddsåtgärd). Om du använder Internet Explorer 8 eller lägre försvinner dessa variabler när du använder någon form av JavaScript-omdirigering (location.href, etc.).
Nedan ska vi implementera ett alternativ för IE8 & lägre så att vi inte förlorar HTTP_REFERER. Annars kan du nästan alltid helt enkelt använda window.location.href.
Testning mot HTTP_REFERER (URL-klistrning, session, etc.) kan hjälpa till att avgöra om en begäran är legitim.
(Obs! Det finns också sätt att kringgå / förfalska dessa hänvisare, som noteras av droops länk i kommentarerna)
Enkel testlösning för webbläsare (fallback till window.location.href för Internet Explorer 9+ och alla andra webbläsare)
Användning: omdirigering ('anotherpage.aspx');
funktion omdirigering (url) {
var ua = navigator.userAgent.toLowerCase (),
isIE = ua.indexOf ('msie')! == -1,
version = parseInt (ua.substr (4, 2), 10);
// Internet Explorer 8 och lägre
if (isIE && version <9) {
var länk = document.createElement ('a');
link.href = url;
document.body.appendChild (länk);
link.click ();
}
// Alla andra webbläsare kan använda standardfönstret.location.href (de tappar inte HTTP_REFERER som Internet Explorer 8 och lägre gör)
annat {
window.location.href = url;
}
}
|
Det finns många sätt att göra detta.
// window.location
window.location.replace ('http://www.example.com')
window.location.assign ('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/ sökväg'
// fönster.historia
window.history.back ()
window.history.go (-1)
// window.navigate; ENDAST för gamla versioner av Internet Explorer
window.navigate ('top.jsp')
// Förmodligen ingen bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';
// jQuery
$ (plats) .attr ('href', 'http: //www.example.com')
$ (fönster) .attr ('location', 'http: //www.example.com')
$ (plats). prop ('href', 'http://www.example.com')
|
Detta fungerar för alla webbläsare:
window.location.href = 'din_url';
|
Det skulle hjälpa om du var lite mer beskrivande i vad du försöker göra. Om du försöker skapa siddata finns det några alternativ för hur du gör det. Du kan skapa separata länkar för varje sida som du vill kunna komma direkt till.
1
2
3
...
Observera att den aktuella sidan i exemplet hanteras annorlunda i koden och med CSS.
Om du vill att de sökta uppgifterna ska ändras via AJAX är det här jQuery skulle komma in. Vad du skulle göra är att lägga till en klickhanterare till var och en av ankartaggarna som motsvarar en annan sida. Denna klickhanterare skulle åberopa någon jQuery-kod som går och hämtar nästa sida via AJAX och uppdaterar tabellen med de nya uppgifterna. Exemplet nedan förutsätter att du har en webbtjänst som returnerar den nya sidinformationen.
$ (dokument). klar (funktion () {
$ ('a.pager-link'). klicka (funktion () {
var sida = $ (detta) .attr ('href'). split (/ \? /) [1];
$ .ajax ({
typ: 'POST',
url: '/ path-to-service',
data: sida,
framgång: funktion (innehåll) {
$ ('# myTable'). html (innehåll); // byta ut
}
});
returnera falsk; // för att stoppa länken
});
});
|
Jag tycker också att location.replace (URL) är det bästa sättet, men om du vill meddela sökmotorerna om din omdirigering (de analyserar inte JavaScript-koden för att se omdirigeringen) bör du lägga till rel = "canonical" meta tagg till din webbplats.
Att lägga till ett noscript-avsnitt med en HTML-metatagg i är också en bra lösning. Jag föreslår att du använder detta JavaScript-omdirigeringsverktyg tillskapa omdirigeringar. Det har också Internet Explorer-stöd för att skicka HTTP-referrer.
Exempelkod ser utan dröjsmål så här ut:
//:/
Protokoll - Anger det protokollnamn som ska användas för att komma åt resursen på Internet. (HTTP (utan SSL) eller HTTPS (med SSL))
värdnamn - Värdnamn anger värden som äger resursen. Till exempel www.stackoverflow.com. En server tillhandahåller tjänster med värdens namn.
port - Ett portnummer som används för att känna igen en specifik process till vilken ett Internet- eller annat nätverksmeddelande ska vidarebefordras när det anländer till en server.
sökvägen - Sökvägen ger information om den specifika resursen inom värden som webbklienten vill komma åt. Till exempel stackoverflow.com/index.html.
fråga - En frågesträng följer sökkomponenten och ger en informationssträng som resursen kan använda för något ändamål (till exempel som parametrar för en sökning eller som data som ska bearbetas).
hash - Ankardelen av en URL innehåller hash-tecknet (#).
Med dessa egenskaper för platsobjekt kan du komma åt alla dessa URL-komponenter
hash-Ställer in eller returnerar ankardelen av en URL.
värd -uppsättningar
eller returnerar värdnamn och port för en URL.
värdnamn -Set eller
returnerar värdnamnet på en URL.
href - Ställer in eller returnerar hela
URL.
sökväg - Ställer in eller returnerar sökvägen till en URL.
port - Ställer in eller returnerar det portnummer som servern använder för en URL.
protokoll - Ställer in eller returnerar protokollet för en URL.
sök -Set
eller returnerar frågedelen av en URL
Nu Om du vill ändra en sida eller omdirigera användaren till någon annan sida kan du använda href-egenskapen för platsobjektet så här
Du kan använda egenskapen href för platsobjektet.
window.location.href = "http://www.stackoverflow.com";
Platsobjekt har också dessa tre metoder
assign () - Läser in ett nytt dokument.
reload () - Ladda om det aktuella dokumentet.
ersätt () - Ersätter det aktuella dokumentet med ett nytt
Du kan använda tilldela () och ersätta metoder för att omdirigera till andra sidor som dessa
location.assign ("http://www.stackoverflow.com");
location.replace ("http://www.stackoverflow.com");
Hur tilldelar () och ersätter () skiljer sig - Skillnaden mellan ersätt () -metoden och tilldela () -metoden () är att ersätta () tar bort webbadressen till det aktuella dokumentet från dokumenthistoriken, betyder att det inte är möjligt att använda knappen "tillbaka" för att navigera tillbaka till originaldokumentet. Så använd metoden alloc () om du vill ladda ett nytt dokument och vill ge möjlighet att navigera tillbaka till originaldokumentet.
Du kan ändra platsobjektets href-egenskap med jQuery också så här
$ (plats) .attr ('href', url);
Och därför kan du omdirigera användaren till någon annan webbadress.
|
I grund och botten är jQuery bara ett JavaScript-ramverk och för att göra några av sakerna som omdirigering i det här fallet kan du bara använda ren JavaScript, så i så fall har du 3 alternativ med vaniljJavaScript:
1) Om du använder platsbyte kommer detta att ersätta den aktuella historiken på sidan, vilket innebär att det inte går att använda tillbaka-knappen för att gå tillbaka till originalsidan.
window.location.replace ("http://stackoverflow.com");
2) Med hjälp av platstilldelning kommer detta att hålla historiken åt dig och med hjälp av bakåtknappen kan du gå tillbaka till originalsidan:
window.location.assign ("http://stackoverflow.com");
3) Jag rekommenderar att du använder ett av de tidigare sätten, men detta kan vara det tredje alternativet med ren JavaScript:
window.location.href = "http://stackoverflow.com";
Du kan också skriva en funktion i jQuery för att hantera den, men rekommenderas inte eftersom den bara är en ren JavaScript-funktion, du kan också använda alla ovanstående funktioner utan fönster om du redan är i fönsteromfånget, till exempel window.location.replace ("http://stackoverflow.com"); kan vara location.replace ("http://stackoverflow.com");
Jag visar dem alla också på bilden nedan:
|
Bör bara kunna ställa in med hjälp av window.location.
Exempel:
window.location = "https://stackoverflow.com/";
Här är ett tidigare inlägg om ämnet: Hur omdirigerar jag till en annan webbsida?
|
Innan jag börjar är jQuery ett JavaScript-bibliotek som används för DOM-manipulation. Så du borde inte använda jQuery för en sidomdirigering.
Ett citat från Jquery.com:
Medan jQuery kan köras utan större problem i äldre webbläsarversioner,
vi testar inte aktivt jQuery i dem och fixar vanligtvis inte buggar
som kan förekomma i dem.
Det hittades här:
https://jquery.com/browser-support/
Så jQuery är inte en lösning för alla och alla för bakåtkompatibilitet.
Följande lösning med rå JavaScript fungerar i alla webbläsare och har varit standard under lång tid så att du inte behöver några bibliotek för webbläsarstöd.
Den här sidan omdirigeras till Google efter 3000 millisekunder
exempel
Du kommer snart att omdirigeras till google.
setTimeout (funktion () {
window.location.href = "http://www.google.com"; // Webbadressen som kommer att omdirigeras också.
}, 3000); // Ju större nummer desto längre fördröjning.